import React from 'react'
import './index.scss'
export default function MyFooter({ list, changeAllSingle }) {
  // 选中的数量和总价
  const filterList = list.filter((item) => item.goods_state)
  const totalCount = filterList.reduce((acc, cur) => acc + cur.goods_count, 0)
  const totalPrice = filterList.reduce(
    (acc, cur) => acc + cur.goods_count * cur.goods_price,
    0
  )
  // !先确定当前全选按钮的选中状态，为啥？因为后续要根据这个状态取反的结果来控制所有的单选
  const isSelected = list.every((item) => item.goods_state)
  const handleChange = () => {
    // !#2  子组件调用父组件方法的同时并传参
    changeAllSingle(!isSelected)
  }
  return (
    <div className='my-footer'>
      <div className='custom-control custom-checkbox'>
        <input
          type='checkbox'
          className='custom-control-input'
          id='footerCheck'
          checked={isSelected}
          onChange={handleChange}
        />
        <label className='custom-control-label' htmlFor='footerCheck'>
          全选
        </label>
      </div>
      <div>
        <span>合计:</span>
        <span className='price'>¥ {totalPrice}</span>
      </div>
      <button type='button' className='footer-btn btn btn-primary'>
        结算 ({totalCount})
      </button>
    </div>
  )
}
